{% load kingadmin_tags %}
{% load staticfiles %}
<form class="form-horizontal" method="post" onsubmit="VerficationBeforeFormSubmit();">{% csrf_token %}
    {% for field in form_obj %}
        <div class="form-group">
            <label class="col-sm-2 control-label">{{ field.label }}</label>
            <div class="col-sm-10">
                {% if field.name in admin_class.filter_horizontal %}
                    <div class="col-lg-5">
                        <input type="search" class="form-control" oninput="FuzzSearch(this);" placeholder="filter">
                        <select id="id_{{ field.name }}_from" multiple class="form-control">
                            {% get_available_m2m_data field.name form_obj admin_class as available_m2m_data %}
                            {% for obj in available_m2m_data %}
                                <option ondblclick="MoveSelectedOption(this,'id_{{ field.name }}_to');"
                                        value="{{ obj.id }}">{{ obj }}</option>
                            {% endfor %}
                        </select>
                        <p><a style="cursor: pointer;"
                              onclick="MoveAllElements('id_{{ field.name }}_from','id_{{ field.name }}_to')">Choose
                            All</a></p>
                    </div>
                    <div class="col-lg-5">
                        <select tag="selected_m2m" name="{{ field.name }}" id="id_{{ field.name }}_to" multiple
                                class="form-control">
                            {% get_selected_m2m_data field.name form_obj as selected_m2m_data %}
                            {% for obj in selected_m2m_data %}
                                <option ondblclick="MoveSelectedOption(this,'id_{{ field.name }}_from');"
                                        value="{{ obj.id }}">{{ obj }}</option>
                            {% endfor %}
                        </select>
                        <p><a style="cursor: pointer;"
                              onclick="MoveAllElements('id_{{ field.name }}_to','id_{{ field.name }}_from')">Remove
                            All</a></p>
                    </div>
                {% else %}
                    {{ field }}
                {% endif %}
                <span style="color: red">{{ field.errors.0 }}</span>
            </div>
        </div>
    {% endfor %}
    {% if not admin_class.form_add %}  <!--如果这是修改表单-->
        {% for field in admin_class.readonly_fields %}
            <div class="form-group">
                <label class="col-sm-2 control-label">{{ field }}</label>
                <div class="col-sm-10">
                    <p style="margin-top: 7px;">{% get_obj_field_value form_obj field %}</p>
                </div>
            </div>
        {% endfor %}
    {% endif %}
    <div class="form-group">
        {% if not admin_class.form_add %}
            <a style="float: left;margin-left: 100px;" type="submit" class="btn btn-danger"
               href="{% url 'kingadmin:table_obj_delete' app_name model_name form_obj.instance.id %}">delete</a>
        {% endif %}
        <button style="float: right;" type="submit" class="btn btn-primary">Save</button>
    </div>
</form>

<script src="{% static 'plugins/laydate/laydate.js' %}"></script>
<script>
    laydate.render({
            elem: '#id_start_date',
        });
    laydate.render({
            elem: '#id_graduate_date',
        });
    laydate.render({
        elem: '#id_contract_approved_date',
        type: 'datetime',
        theme: '#000',
    });


    function FuzzSearch(self) {
        var search_text = $(self).val().toUpperCase();
        $(self).next().children().each(function () {
            if ($(this).text().toUpperCase().search(search_text) != -1) {
                $(this).show();
            } else {
                $(this).hide();
            }
        })
    }

    function MoveAllElements(from_id, to_id) {
        $('#' + from_id).children('option').each(function () {
            MoveSelectedOption(this, to_id);
        })
    }

    function VerficationBeforeFormSubmit() {
        $('select[tag] option').prop('selected', true);
        //$('select[tag] option').attr('selected',true);
    }

    function MoveSelectedOption(self, target_id) {
        var new_target_id = $(self).parent().attr('id');
        var option = "<option value='" + $(self).val() + "' ondblclick=MoveSelectedOption(this,'" + new_target_id + "')>" + $(self).text() + "</option>";
        $('#' + target_id).append(option);
        $(self).remove();
    }
</script>